<template>
<div class="payList">
	<div class="numList" >
			<div class="detailItemCon" v-for="item in list">
				<div class="itemPicCon">
					<img class="itemPic" :src="imageHost+item.productImage" >
				</div>
				<div class="nameCon">
				
						{{item.productName}}
					
				</div>
				<div class="PriceAndNum">
					<span class="price">
						{{item.currentUnitPrice}}
					</span>
					<span class="Num">
						*{{item.quantity}}
					</span>
				</div>
			</div>
			<div class="totalPrice">
				总价:<span class="detailPayment">
					{{productTotalPrice}}
				</span>
			</div>
		</div>
		<div class="goPayment" @click="goPayment">
			去结算
		</div>
		<div class="floatBox" v-show="showFloat">
			<login></login>
		</div>
</div>
</template>

<script>
import 'common/css/reset.css';
import login from  "components/login/login";

var _order   =require("common/util/server/order.js");
export default {


  name: 'payList',
  created(){

  	var _this=this ;
  _order.getProductList(function(res){
  		_this.list=res.data.orderItemVoList;
  		_this.imageHost=res.data.imageHost;
  		_this.productTotalPrice=res.data.productTotalPrice;

  },function(err){
  	_this.showFloat=true;

  })
  },
  mounted(){
  	this.$emit("payListCreated");
  },
  methods:{
  	
  	goPayment(){
  		var _this=this;
  	
  		_order.creatOrder({shippingId:this.$route.params.id},function(res){
  			var orderNum=res.data.orderNo;
  			_this.$router.push({name:'payment',params:{orderNum:orderNum}});
  		},function(err){
  			window.alert(err.data.msg)
  		})
  	},
  },
  components:{
  	login
  },
  data () {
    return {
    	list:{},
    	imageHost:"",
    	productTotalPrice:"",
    	showFloat:false,
    	shippingId:""

    }
  }
}
</script>

<style lang="stylus" scoped>
.numList
	box-sizing:border-box
	margin:10px auto
	margin-bottom:20px
	width:90%
	border-radius:5px
	box-shadow:5px 5px 10px #bfbfbf
	background:#fff
	padding:10px
	.detailItemCon
		display:flex
		border-bottom:.5px solid #bfbfbf
		padding:10px 0;
		.PriceAndNum
			flex:0 0 50px
			text-align:right
			padding-right:10px			
			.price
				color:rgb(222,64,43)
				font-weight:600
			span
				display:block
	.totalPrice
		line-height:30px
		text-align:right
		padding-right:10px
		.detailPayment
			font-size:20px
			color:rgb(222,64,43)
			font-weight:600
.goPayment{
	
	height:40px
        width:80%
        background:rgb(222, 64, 43)
        margin:0 auto
        line-height:40px
        color:#fff
        font-size:20px
        font-weight:700
        text-align:center
}			
.floatBox{
position: fixed
height:100%;
width:100%;


}				
.itemPicCon{
	width:50px;
	height:50px;
	flex:0 0 50px;
}				    	
.itemPicCon .itemPic{
width:50px;
height:50px;
}	
.nameCon{	flex:1;
	
	text-overflow:ellipsis	;}

</style>